<template>
  <ContainerLayout class="test">
    <div class="table-warp" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
      <div class="cell" v-for="item in cellList" :key="item.name" :class="{ 'is-checked': item.isChecked }">{{ item.name }}-{{ item.width }}</div>
    </div>
  </ContainerLayout>
</template>
<script setup lang="ts">
import ContainerLayout from '../layout/ContainerLayout.vue'
import { ref } from 'vue'

interface Cell {
  name: string
  width: string
  isChecked: boolean
}

const cellList = ref<Cell[]>([
  { name: '1', width: '1%', isChecked: false },
  { name: '2', width: '2%', isChecked: false },
  { name: '3', width: '3%', isChecked: false },
  { name: '4', width: '4%', isChecked: false },
  { name: '5', width: '5%', isChecked: false },
  { name: '6', width: '6%', isChecked: false },
  { name: '7', width: '7%', isChecked: false },
  { name: '8', width: '8%', isChecked: false },
  { name: '9', width: '9%', isChecked: false },
  { name: '10', width: '10%', isChecked: false },
])
// 在 <script setup> 标签中添加以下代码
const selectedCells = ref<Cell[]>([]) // 用于存储被选中的单元格
let isDragging = false
let startCell: Cell | null = null // 用于存储鼠标按下时选中的单元格
let endCell: Cell | null = null // 用于存储鼠标移动时当前选中的单元格

// 处理鼠标按下事件
const handleMouseDown = (event: any) => {
  event.preventDefault() // 阻止默认的鼠标按下行为
  isDragging = true // 设置拖拽状态为 true
  selectedCells.value = [] // 清空已选中的单元格

  const cell = findCellFromEvent(event) // 查找鼠标按下时选中的单元格
  if (cell) {
    startCell = cell // 设置起始单元格
    endCell = cell // 设置结束单元格（初始时与起始单元格相同）
    cell.isChecked = true // 选中该单元格
    selectedCells.value = [cell] // 将该单元格添加到已选中的单元格列表中
  }
}

// 处理鼠标移动事件
const handleMouseMove = (event: any) => {
  if (isDragging && startCell) {
    // 查找鼠标当前位置下的单元格
    const currentCell = findCellFromEvent(event)
    if (currentCell && currentCell !== endCell) {
      endCell = currentCell // 更新结束单元格
      updateSelectedCells() // 更新已选中的单元格列表
    }
  }
}

// 处理鼠标抬起事件
const handleMouseUp = () => {
  isDragging = false // 重置拖拽状态为 false
  cellList.value.map((e) => (e.isChecked = false))
  console.log('startCell', startCell)
  console.log('endCell', endCell)
}

// 查找鼠标事件对应的单元格
const findCellFromEvent = (event: MouseEvent): Cell | null => {
  const cells = Array.from(document.querySelectorAll('.cell')) as HTMLElement[]
  const targetCell = cells.find((cell) => {
    const rect = cell.getBoundingClientRect()
    return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom
  })
  const cellName = targetCell?.textContent?.split('-')[0]
  return cellName ? cellList.value.find((cell) => cell.name === cellName) ?? null : null
}

// 更新已选中的单元格列表
const updateSelectedCells = () => {
  if (!startCell || !endCell) return
  const startIndex = cellList.value.indexOf(startCell)
  const endIndex = cellList.value.indexOf(endCell)
  const [start, end] = startIndex < endIndex ? [startIndex, endIndex] : [endIndex, startIndex]
  selectedCells.value = cellList.value.slice(start, end + 1)
  cellList.value.forEach((cell, index) => {
    cell.isChecked = index >= start && index <= end
  })
}
</script>
<style scoped lang="scss">
.test {
  height: 100%;

  .table-warp {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #000;
    .cell {
      flex: 1;
      border-bottom: 1px solid #000;
      user-select: none;
      &.is-checked {
        background-color: azure;
      }
    }
  }
}
</style>
